<template>
  <div>
    <div class="title"><h1 >浏览历史</h1></div>
    <div class="card">
      <el-card style="width: 30%" shadow="hover" @click="gotoDetail()">
        <div style="display: flex;flex-direction: row">
          <div class="img">
            <el-image
                src="https://img11.360buyimg.com/babel/s320x320_jfs/t1/181164/21/9948/132561/60cc6596E5687974c/c6426105d083950b.jpg!cc_320x320"></el-image>
          </div>
          <div class="info">
            <span class="text">荣耀50 1亿像素超清影像 5G 6.57英寸超曲屏 66W超级快</span>
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>

      <el-card style="width: 30%" shadow="hover" @click="gotoDetail()">
        <div style="display: flex;flex-direction: row">
          <div class="img">
            <el-image
                src="https://img11.360buyimg.com/babel/s320x320_jfs/t1/181164/21/9948/132561/60cc6596E5687974c/c6426105d083950b.jpg!cc_320x320"></el-image>
          </div>
          <div class="info">
            <span class="text">荣耀50 1亿像素超清影像 5G 6.57英寸超曲屏 66W超级快</span>
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>

      <el-card style="width: 30%" shadow="hover" @click="gotoDetail()">
        <div style="display: flex;flex-direction: row">
          <div class="img">
            <el-image
                src="https://img11.360buyimg.com/babel/s320x320_jfs/t1/181164/21/9948/132561/60cc6596E5687974c/c6426105d083950b.jpg!cc_320x320"></el-image>
          </div>
          <div class="info">
            <span class="text">荣耀50 1亿像素超清影像 5G 6.57英寸超曲屏 66W超级快</span>
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>

      <el-card style="width: 30%" shadow="hover" @click="gotoDetail()">
        <div style="display: flex;flex-direction: row">
          <div class="img">
            <el-image
                src="https://img11.360buyimg.com/babel/s320x320_jfs/t1/181164/21/9948/132561/60cc6596E5687974c/c6426105d083950b.jpg!cc_320x320"></el-image>
          </div>
          <div class="info">
            <span class="text">荣耀50 1亿像素超清影像 5G 6.57英寸超曲屏 66W超级快</span>
            <time class="time">{{ currentDate }}</time>
          </div>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>

export default {
  name: "BrowseHistory",
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    gotoDetail(){
      this.$router.push({
        path:'detail',
      })
    }
  },
}
</script>

<style scoped>
.title{
  display: flex;
  justify-content: center;
  margin: 20px;
}
.card {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.img {
  flex: 1;
}

.info {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.text {
  flex: 1;
}

.time {
  flex: 2;
  font-size: 13px;
  color: #999;
}
</style>